<template>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :label="true">收起</el-radio-button>
    <el-radio-button :label="false">展开</el-radio-button>
    </el-radio-group>
    <el-row class="tac">
    <el-col :span="12">
      <h5 class="mb-2">问卷管理系统</h5>

  <el-menu
    :default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <el-menu-item index="/Home">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/information" v-if="isnotVisitor">
      <i class="el-icon-menu"></i>
      <span slot="title">个人中心</span>
    </el-menu-item>
    <el-menu-item index="/Fillin">
      <i class="el-icon-info"></i>
      <span slot="title">填写问卷</span>
    </el-menu-item>
    <el-menu-item index="/CreateSurvey" v-if="isnotVisitor">
      <i class="el-icon-user"></i>
      <span slot="title">设计问卷</span>
    </el-menu-item>
<!-- 
       <el-sub-menu index="/Manager">
          <template #title>
            <el-icon><location /></el-icon>
            <span>问卷管理</span>
          </template>
            <el-menu-item index="/Statistics">问卷统计</el-menu-item>
            <el-menu-item index="/Inquiry">问卷查询</el-menu-item>
        </el-sub-menu>
--> 
    <el-menu-item index="/Manager" v-if="isnotVisitor">
      <i class="el-icon-edit-manager"></i>
      <span slot="title">问卷管理</span>
    </el-menu-item>
    <el-menu-item index="/Checkfilled">
      <i class="el-icon-edit-outline"></i>
      <span slot="title">填写过的</span>
    </el-menu-item>
    <el-menu-item index="/Administator" v-if="isAdmin">
      <i class="el-icon-edit-outline"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>
  </el-menu>
</el-col>
</el-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const role = localStorage.getItem('role');
const isAdmin = ref(role === 'ADMIN');
const isnotVisitor = ref(role !=='VISITOR');

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 40px;
}
</style>
